import React, { Component } from 'react';

import { getMenuList } from "@/api/menu"
import { message, Table, Switch,Button } from "antd"
import { EditOutlined, DeleteOutlined } from "@ant-design/icons"



// 列信息
const columns = [
    { title: "菜单名称", dataIndex: "title", key: "title" },
    { title: "菜单地址", dataIndex: "url", key: "url" },
    // 自定义列模板信息
        // render: (val) => JSX  val就是这个字段的数据！
    { 
        title: "菜单状态", 
        dataIndex: "status", 
        key:"status",
        render: val => <Switch defaultChecked={ val==1 } />
    },
    {
        title:"操作",
        key:"action",
        render: () => (<>
            <Button type="primary" shape="circle" icon={<EditOutlined />} ></Button>
            <Button type="danger" shape="circle" icon={<DeleteOutlined />} ></Button>
        </>)
    }
]
class Menu extends Component {
    state = {
        // 菜单列表
        menulist:[]
    }
    render() {
        let { menulist }= this.state;
        return (
            <>
                {/* dataSource表格的数据；columns表格的列信息 */}
                <Table  dataSource={menulist} columns={columns} />
            </>
        );
    }
    async componentDidMount(){
        let { code,list,msg} = await getMenuList();
        if (code !== 200) return message.error('获取失败' + msg)
        this.setState({
            menulist:list
        })
    }
}

export default Menu;
